"use client"
import { useState, useEffect } from "react";

type Users = {
    id: number,
    name: string,
    username: string,
    email: string,
    phone: string
}

export default function UserClient() {
    const [users, setUsers] = useState<Users[]>([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState("");

    useEffect(() => {
        async function fetchUsers() {
            try {
                const response = await fetch('https://jsonplaceholder.typicode.com/users');
                const data = await response.json();
                setUsers(data);
            } catch (err) {
                if (err instanceof Error) {
                    setError(err.message);
                }
            } finally {
                setLoading(false);
            }
        }

        fetchUsers()
    }, []);

    if (loading) return <div>loading...</div>

    if (error) return <div>{error}</div>

    return (
        <ul className="space-y-4 p-4">
            {
                users.map(user => (
                    <li key={user.id} className="p-2 border rounded-lg border-gray-500 shadow-md">
                        <div className="font-bold">{user.name}</div>
                        <div className="text-sm">
                            <div>Username: {user.username}</div>
                            <div>Email: {user.email}</div>
                            <div>Phone: {user.phone}</div>
                        </div>
                    </li>
                ))
            }
        </ul>
    )
}